import { useState } from "react";


function App() {
  const [list, setItems] = useState([{ id: 9, name: "李白", phone: "12" }, { id: 8, name: "杜甫", phone: "23" }])
  // 弹框显示
  const [CancelDom, setCancelDom] = useState(false)
  //  新增  用于跟踪输入值的状态
  const [inputValue, setinput] = useState({ id: "", name: "", phone: "" })
  // const [inputValue, setinput] = useState({ id: list.length > 0 ? Math.max(...list.map(item => item.id)) + 1 : 1, name: "", phone: "" })


  //  删除列表数据
  const listdeletes = (sid) => {
    console.log(sid);
    setItems(list.filter(item => item.id !== sid))

  }
  // 添加
  const argumen = () => {
    setCancelDom(true)
  }
  // 取消
  const Cancel = () => {
    setCancelDom(false)
  }
  // 确定
  const okcel = () => {
    setItems([...list, inputValue]);

    setinput({ id: "", name: "", phone: "" })
  }

  // 修改
  const setedits = () => {

    
    setCancelDom(true)
    
  }


  return (
    <div style={{ padding: "0", margin: "0" }}>
      {/* 增删改查 */}
      <div style={{ width: "315px", margin: "0 auto" }}>
        <h1 style={{ textAlign: "center" }}>学生考勤签到查询</h1>
        <div style={{ margin: "0px 10px 20px 0px", display: "flex", justifyContent: "space-between" }}> <div><input type="text" /><button>查询</button></div>  <div><button onClick={() => argumen()}>添加</button> <button onClick={() => setedits()}>修改</button></div></div>
        <div style={{ height: "400px" }}>
          <table style={{ borderSpacing: "10px" }}>
            <thead>
              <tr style={{ borderBottom: "1px solid black", display: "block", padding: "5px" }}>
                <th>学籍</th>
                <th>姓名</th>
                <th>电话</th>
                <th>时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {list.map((item) => (
                <tr style={{ borderBottom: "1px solid black", display: "block", padding: "5px" }} key={item.id}>
                  <td>{item.id}</td>
                  <td>{item.name}</td>
                  <td>{item.phone}</td>
                  <td>10:20</td>
                  <td><button onClick={() => listdeletes(item.id)}>删除</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* 添加 */}
      <div style={{ position: "fixed", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: "rgb(0,0,0,0.7)", zIndex: "100", display: CancelDom ? "block" : "none" }}>
        <div style={{ width: "400px", height: "350px", background: "rgb(245, 245, 245)", position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)" }}>
          <div style={{ display: 'flex', flexWrap: "wrap", flexDirection: "column", alignContent: "space-around", alignItems: "center" }}>
            <h3>添加数据</h3>
            <div>班级:<input style={{ height: "25px", margin: "10px" }} type="text" value={inputValue.id} onChange={(e) => setinput({ ...inputValue, id: e.target.value })} /></div>
            <div>姓名:<input style={{ height: "25px", margin: "10px" }} type="text" value={inputValue.name} onChange={(e) => setinput({ ...inputValue, name: e.target.value })} /></div>
            <div>电话:<input style={{ height: "25px", margin: "10px" }} type="text" value={inputValue.phone} onChange={(e) => setinput({ ...inputValue, phone: e.target.value })} /></div>
            <div>时间:<input style={{ height: "25px", margin: "10px" }} type="text" /></div>
          </div>
          <div style={{ display: "flex", justifyContent: "space-around", marginTop: "30px" }}>
            <div onClick={() => Cancel()} style={{ width: "50px", height: "30px", border: "1px solid black", borderRadius: "5px", textAlign: "center", lineHeight: "30px" }}>取消</div>
            <div onClick={() => okcel()} style={{ width: "50px", height: "30px", border: "1px solid black", borderRadius: "5px", textAlign: "center", lineHeight: "30px", background: "rgb(51, 143, 255)" }}>确定</div>
          </div>
        </div>
      </div>

    </div >
  );
}



export default App;
